<template>
  <view class="adjust-parameter-grids">
    <view v-if="$slots.prefix && !noPrefix" class="prefix">
      <slot name="prefix"></slot>
    </view>

    <view v-for="grid in grids" :key="grid.key" class="grid-item" :class="{ fullrow: !grid.isHalf }">
      <ParameterCard
        :title="transformedTitle || grid.title"
        :type="grid.type"
        :option-key="grid.key"
        :value="grid.value"
        :unit="grid.unit"
        :disabled="disabled"
        :options="grid.options"
        @change="onValueChange"
        @custom-click="emit('custom-click', $event)"
      />
    </view>
    <view v-if="$slots.suffix && !noSuffix" class="suffix">
      <slot name="suffix"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import ParameterCard, {
  type CardType,
  type CustomClickPayload,
  type Option,
  type ValueType,
} from '../components/parameterCard.vue'

export type ParameterGrid = {
  key: string
  title?: string
  unit?: string
  type: CardType
  options: Option[]
  value: ValueType | null
  isHalf?: boolean
}

defineProps<{
  grids: ParameterGrid[]
  transformedTitle?: string
  disabled?: boolean
  noPrefix?: boolean
  noSuffix?: boolean
}>()
const emit = defineEmits<{
  (e: 'change', key: string, value: ValueType): void
  (e: 'custom-click', payload: CustomClickPayload): void
}>()

function onValueChange(key: string, value: ValueType) {
  emit('change', key, value)
}
</script>

<style lang="less">
.adjust-parameter-grids {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 2;
  gap: 12rpx;
  justify-content: stretch;
  > .prefix,
  > .suffix {
    grid-column-start: span 2;
  }
  > .prefix {
    margin-bottom: 24rpx;
  }
  > .suffix {
    margin-top: 24rpx;
  }
  > .grid-item {
    &.fullrow {
      grid-column-start: span 2;
    }
  }
}
</style>
